<template>
    <div>
        <h2>房型信息录入页面</h2>
        
        <table>
            <tr>
                <td>房型名称</td>
                <td>
                    <input type="text" v-model="data.fxmc">
                </td>
            </tr>
              <tr>
                <td>房型大小</td>
                <td>
                    <input type="text" v-model="data.fxdx">
                </td>
            </tr>
              <tr>
                <td>图片</td>
                <td>
                  <input type="file" @change="tps">
                  <img :src="'https://localhost:7258/'+data.img" style="width: 60px;height: 60px;">
                </td>
            </tr>
              <tr>
                <td>人数</td>
                <td>
                    <input type="text" v-model="data.rs">
                </td>
            </tr>
              <tr>
                <td>价格</td>
                <td>
                    <input type="text" v-model="data.jg">
                </td>
            </tr>
           
          
             <tr>
                <td></td>
                <td>
                    <input type="button" value="录入" @click="add">
                </td>
            </tr>
        </table>

    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';

const data=ref({
   "fxid": 0,
  "fxmc": "",
  "fxdx": 0,
  "img": "",
  "rs": "",
  "jg": ""
})

const add=()=>{
    if(data.value.fxmc==""){
        alert("房型名称不能为空");
        return
    }
     if(data.value.fxdx==0){
        alert("房型大小不能为空");
        return
    }
     if(data.value.rs==""){
        alert("房型人数不能为空");
        return
    }
     if(data.value.jg==""){
        alert("房型价格不能为空");
        return
    }
    axios.post("https://localhost:7258/api/roomfx/fxadd",data.value).then(res=>{
        if(res.data==-1){
            alert("相同房型名称不能出现多次")
        }else if(res.data>0){
            alert("房型录入成功");
            location.href="/fxxs"
        }else{
            alert("录入失败");
        }
    })
}

const tps=(a:any)=>{
    var f= a.target.files[0]
    var fs= new FormData
    debugger
    
    fs.append("file",f)
    if(f.size>1024*1024*2){
        alert("大小不能超过2MB")
        return
    }
       if(f.type!="image/jpeg"&&f.type!="image/png"&&f.type!="image/webp"){
        alert("上传文件不是图片")
        return
    }
    axios.post("https://localhost:7258/api/tp/tps",fs).then(res=>{
        data.value.img=res.data
    })  
}

</script>

<style scoped>

</style>